@import '../../libs/base.less';

.wrapper {
	width: 100%;

	.header {
		width: 100%;
		height: 40px;
		background: #337ab7;

		a.btn-noborder {
			height: 100%;
			border-radius: 0;
			text-align: center;
			padding: 10px 15px;
			margin: 0;
			border: 0;
			float: left;

			span {
				margin: 0 3px 0 0;
			}
		}

		i {
			width: 1px;
			height: 20px;
			display: inline-block;
			float: left;
			margin: 10px 3px;
			background: #ddd;
		}
	}


	.search-section {
		position: relative;
		width: 100%;
		min-height: 100px;
		overflow: hidden;
		background: #fff;
		padding: 0;

		.title {
			height: 26px;
			margin: 0 15px 5px;
			font: normal normal bold 14px/26px 'microsoft yahei';
			color: #666;
			border-bottom: 1px solid #999;
		}


    @search-input-height: 30px;
    //搜索区域
    .search-input {
      position: relative;  
      width: 90%;
      height: @search-input-height;
      margin: 15px;
      border: 1px solid #ccc;

      input {
        width: ~'calc(100% - 36px)';
        float: left;
        height: 100%;
        padding: 0 3px;
        border: 0;
        outline: none;
        font: normal normal normal 14px/@search-input-height 'microsoft yahei';
      }

      .btn-search {
        width: 30px;
        height: 100%;
        float: right;
        background: transparent url(../../imgs/search.png) no-repeat center center; 
        border: 0;

        &:active {
          background-color: #ddd;
        }
      }
    }
  

    @li-height: 36px;
		.mrow {
			width: 100%;
      height: @li-height;

      li {
        width: 33.3%;
        height: @li-height;
        float: left;
        border: 1px solid #ddd;
        border-left: none;
        text-align: center;
        font: normal normal normal 14px/@li-height 'microsoft yahei';
      }
		}
	}

	.result-section {
		position: relative;
		width: 100%;
		min-height: 100px;
		overflow: hidden;
		padding: 0;

		.title {
			height: 26px;
			margin: 0 15px;
			font: normal normal bold 14px/26px 'microsoft yahei';
			color: #63a8e2;
			border-bottom: 1px solid #63a8e2;
		}

		.bikes-data-list {
			margin: 0 15px;

			@li-height: 60px;
			.line-wrapper { 
				width: 100%; 
				min-height: @li-height; 
				overflow: hidden; 
				border-bottom: 1px solid #ddd; 

				.line-scroll-wrapper { 
					min-height: @li-height; 
					overflow: hidden; 
					white-space: nowrap; 
					clear: both; 

					.line-normal-wrapper { 
						width: 290px;
						display: inline-block; 
						float: left; 
						padding: 0;

            a {
              text-decoration: none;
              &:active {
                text-decoration: none;
              }
            }

						.title {
						  min-height: 30px;
					    overflow: hidden;
					    display: block;
					    color: #387FC8;
					    border: 0;
					    font: normal normal bold 15px/30px 'microsoft yahei';
					    margin: 0 15px;
						}

						.param {
					    margin: 0 15px;

							.lbl {
								color: #999;
							}
							.text {
								color: #333;
    						font: normal normal normal 14px/25px 'microsoft yahei';
							}
							.price {
								color: #ff6666;
    						font: normal normal bold 14px/25px 'microsoft yahei';								
							}
						}
					}

					.line-function { 
						float: left; 
						width: 260px; 
						height: @li-height;


						.btn {
							height: @li-height;
							float: left; 
							color: #fff;
							border-radius: 0;
							font: normal normal normal 14px/@li-height 'microsoft yahei';
							padding: 0;
							text-align: center;

							&.btn-edit {
								width: 60px;
								background: #99cccc;
							}
							&.btn-imgs {
								width: 80px;
								background: #BDB76A;
								// margin-left: -8px;
							}
							&.btn-delete {
								width: 60px;
								background: #ff6666;
								// margin-left: -9px;
							}
						}

						button { 
							width: 100%; 
							height: 100%; 
							background: red; 
							border: none; 
							font-size: 24px; 
							font-family: 'Microsoft Yahei'; 
							color: #fff; 
						}
					}

				}
			}

			.error {
				width: 100%;
				text-align: center;
				font: normal normal normal 15px/30px 'microsoft yahei';
				color: #999;
			}
		}




		ul {
			margin: 0 15px;

			@li-height: 40px;
			li {
				height: @li-height;
				border-bottom: 1px solid #ddd;

				.overview {
					width: 100%;

					span {
						font: normal normal normal 15px/@li-height 'microsoft yahei';
						color: #63a8e2;
						float: left;
					}

					.moto-number {
						width: 100px;
					}

					.moto-name {
						margin-left: 15px;					
					}
				}

				@function-width: 150px;
				.function {
					position: absolute;
					top: 0;
					height: @li-height;
					right: -@function-width;
				}
			}
		}

	}
	
}





//最上层的选择页面
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 3;
  overflow: hidden;

  &.show {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    // animation: fadein 0.3s linear 0s 1 running forwards;
  }

  .backdrop {
    width: 20%;
    float: left;
    height: 100%;

    .close-choice {
      position: relative;
      float: right;
      width: 50px;
      height: 30px;
      top: 45%;
      background: transparent url(imgs/arrow.png) no-repeat center center;
      cursor: pointer;
    }
  }
  
  .content {
    position: relative;
    width: 80%;
    height: 100%;
    float: right;
    background: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    &.show {
      display: block;
      // animation: slidein 1s linear 0s 1 normal running backwards;
    }
    &.hide {
      display: none;
      // animation: slideout 1s linear 0s 1 normal running both;
    }

    @dialog-li-height: 44px;
    .title {
      width: 100%;
      height: @dialog-li-height;
      border-bottom: 1px solid #ddd;
      font: normal normal normal 15px/@dialog-li-height 'microsoft yahei';
      text-align: center;
    }

    ul.dialog {
      width: 100%;
      
      li {
        width: 100%;
        min-height: 44px;
        overflow: hidden;
        background: #fff;
        border-bottom: 1px solid #ddd;

        &:active {
          background: #f5f5f5;
        }

        a {
          width: 100%;
          height: 100%;
          display: block;
          color: #333;
          font: normal normal normal 15px/@dialog-li-height 'microsoft yahei';
          & > span {
            display: block;
            padding: 0 15px;
          }
        }

        & > span {
          color: #333;
          font: normal normal normal 15px/@dialog-li-height 'microsoft yahei';
          margin: 0 15px;
        }

        &.action {
          span {
            color: #387FC8;
          }
        }
      }
    }

    .modal-preloader {      
      position: relative;
      width: 100%;
      height: 60px;
      display: none;
      font: normal normal normal 14px/60px 'microsoft yahei';
      color: #999;
      text-align: center;

      &.show {
        display: block;
      }
    }
  }
}


.set-input-width(@box-width, @input-width, @btn-width) {
  .container {
    .search-input {
      width: @box-width;
      input {
        width: @input-width;
      }
      .btn-search {
        width: @btn-width;
      }
    }
  }
}

@screen-sm-max: 480px;
@media (max-width: @screen-sm-max) {
  .set-input-width( 320px, 280px, 30px );
  .cons {
    margin: 0;
    border: 0;
    &:before {
      margin: 0;
      border: 0;        
    }
  }
}

@screen-xs-max: 320px;
@media (max-width: @screen-xs-max) {
  .set-input-width( 280px, 240px, 30px );
  .cons {
    margin: 0;
    border: 0;
    &:before {
      margin: 0;
      border: 0;        
    }
  }
}
